<extend name="Online/base"/>
<block name="css">
<link rel="stylesheet" href="__ONLINE__/css/index.pkg.css">
</block>
<block name="body">
	<div class="g-bd">
        <div class="row row-banner">
            <img src="__ONLINE__/img/banner.jpg" width="100%" alt="">
        </div>
        <div class="row row-category">
            
            <volist name="zone_category" id="vo" key="i">
            <section>
                <h1 align="center">{$vo.zone_name|htmlspecialchars} | {$vo.zone_title|htmlspecialchars}</h1>
                <table class="list">
                    <tr>
                    	<volist name="vo.category_list" id="v" key="j">
                        <td>
                            <a href="{:U('Online/zoneCategory', array('category_id' => $v['online_category_id']))}">
                                <span><img data-echo-animate="zoomIn" data-echo-animate="fadeInDown" data-echo="__ONLINE__/img/icon_{$icon[$v['online_category_id']]}.png"></span>
                                <p>{$v.category_name|htmlspecialchars}</p>
                            </a>
                        </td>
                        <if condition="$j eq 5 or $j eq 10 or $j eq 15"></tr><tr></if>
                        </volist>
                        <if condition="count($vo['category_list']) lt 10">
							<if condition="count($vo['category_list']) lt 5">
								<for start="count($vo['category_list'])" end="5"><td></td></for>
							<else />
								<for start="count($vo['category_list'])" end="10"><td></td></for>
							</if>
						</if>
                    </tr>

                </table>
            </section>
            </volist>
                

            <section>
                <h1 align="center">特卖区</h1>
                <table class="list">
                    <tr>
                        <td>
                            <a href="http://next.hrbjjhh.com/activity-index-id-37.html">
                                <span><img data-echo-animate="zoomIn" data-echo="__ONLINE__/img/icon_25.png"></span>
                                <p>线上零利润</p>
                            </a>
                        </td>
                        <td>
                            <a href="http://next.hrbjjhh.com/shop-sale.html#jj">
                                <span><img data-echo-animate="zoomIn" data-echo="__ONLINE__/img/icon_24.png"></span>
                                <p>厂家直供区</p>
                            </a>
                        </td>
                        <td>
                            <a href="http://next.hrbjjhh.com/activity-index-id-28.html">
                                <span><img data-echo-animate="zoomIn" data-echo="__ONLINE__/img/icon_32.png"></span>
                                <p>全包装修</p>
                            </a>
                        </td>
                        <td>
                            <a href="http://next.hrbjjhh.com/activity-index-id-19.html">
                                <span><img data-echo-animate="zoomIn" data-echo="__ONLINE__/img/icon_36.png"></span>
                                <p>轻辅施工</p>
                            </a>
                        </td>
                        <td>&nbsp;</td>
                    </tr>
                    
                </table>
            </section>

            <section>
                <h1 align="center">功能区</h1>
                <table class="list">
                    <tr>
          	            <volist name="page_list" id="vo">
                        <td>
                            <a href="{:U('Online/onePage', array('id' => $vo['page_id']))}">
                                <span><img data-echo-animate="zoomIn" data-echo="__ONLINE__/img/icon_{$icon_one[$vo['page_id']]}.png"></span>
                                <p>{$vo.page_name|htmlspecialchars}</p>
                            </a>
                        </td>
                        </volist>
                        <if condition="count($page_list) lt 5">
							<for start="count($page_list)" end="5"><td></td></for>
						</if>
                    </tr>
                    
                </table>
            </section>
        </div>

        <div class="row row-join">
            <h1>免费报名家博会</h1>
            <div class="u-join">
                <input v-on:blur="checkTel" v-model="tel" placeholder="请留下您的电话号" type="tel" maxlength="11">
                <a class="btn-ok"v-bind:class="{'btn-ok': true, 'btn-disable': submit_lock}"  v-on:click="submit" debounce="1500">我要报名</a>
                <div class="clearfix"></div>
            </div>

            <p v-show="tel_error" class="u-tip">请输入正确的手机号</p>

            <div class="u-radio">
                <div class="radio" v-on:click="changeJoinType(0)" v-bind:class="{'active': 0 == join_type}">
                    <span><a></a></span>
                    <p>普通门票(免费)</p>
                </div>
                <div class="radio" v-on:click="changeJoinType(1)" v-bind:class="{'active': 1 == join_type}">
                    <span><a></a></span>
                    <p>VIP门票(20元)</p>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>

    </div>

</block>
<block name="js">
<script type="text/javascript">
    var API = {
        'act': "{:U('Activity/join')}"
    }
    var MODEL = {
        'act_id': '{$activity_id}',
    };
    </script>
<script type="text/javascript" src="__ONLINE__/js/index.pkg.js"></script>
</block>
